<template>
  <div class="app">
    <div class="banner">
      <banner></banner>
    </div>

    <div class="Neteasecloud">
      <span class="title">网易出品</span>
      <span class="title-1">更多></span>
      <Mvlistcommond></Mvlistcommond>
    </div>

    <div class="Mvrank">
      <span class="title">排行榜</span>
      <span class="title-1">更多></span>
      <Mvlistmvrank></Mvlistmvrank>
    </div>

    <div class="Newmv">
      <span class="title">最新速递</span>
      <span class="title-1">更多></span>
      <Mvlistnewmv></Mvlistnewmv>
    </div>
   </div>
</template>

<script>
import banner from '../components/banner.vue'
import Mvlistcommond from '../components/Mvlist-commond.vue'
import Mvlistmvrank from '../components/Mvlist-mvrank.vue'
import Mvlistnewmv from '../components/Mvlist-newmv.vue'

export default {
  data(){
    return{

    };
  },
  components:{
    banner,
    Mvlistcommond,
    Mvlistmvrank,
    Mvlistnewmv
  }
}
</script>

<style lang="scss">
.app{
  background-color: #EFEFF4;
  .Neteasecloud,.Mvrank,.Newmv{
    background-color: #EFEFF4;
    position: relative;
    padding: 10px 0px;
  }
  
}
.title{
    position:absolute;
    width: 100%;
    text-align: left;
    font-size: 25px;
    font-weight: bolder;
    color: black;
    margin: 0px 10px;
    left:8px

  }
  .title-1{
    position: relative;
    width: 100%;
    text-align: left;
    font-size: 15px;
    font-weight: bolder;
    color: black;
    left: 140px;
  }
</style>